<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 哪个组件的template就用到哪个组件的变量或者方法 -->
  <div id="app">
    <h1>这是父组件</h1>
    <p>count: {{count}}</p>
    <!-- 监听事件(在子组件里面调用父组件的方法) -->
    <!-- @abc叫做自定义事件 -->
    <!-- 需要在子组件调用 this.$emit("abc") 方法 -->

    <!-- this.$emit()方法还可以接受第二个参数，第二个参数可以在父组件的事件的参数里面获取到 -->
    <child @abc="fn"></child>
  </div>

  <script src="../Vue.js"></script>

  <script>
    const { createApp } = Vue;

    const Child = {
      data() {
        return {
          num: 999
        }
      },
      template: `
        <div>
          <h2>这是子组件</h2>
          <button @click="childClick">子组件的按钮</button>
        </div>
      `,
      methods: {
        childClick() {
          this.$emit("abc", this.num)
        }
      }
    };

    createApp({
      data() {
        return {
          count: 1
        }
      },
      methods: {
        fn(n) {
          console.log("fn", n);
          this.count = n;
        }
      },
      components: {
        Child
      }
    }).mount("#app")
  </script>
</body>
</html>